<template>
  <div class="wrapper">
    <!-- 导航栏 -->

    <div class="header">
      <a-input v-model="commentStr"></a-input>
      <a-button @click="handlePublish" type="primary">发送</a-button>
    </div>

    <div class="body">
      <template v-for="item in commentList">
        <comment :data="item">
          <template #actions>
            <span class="action" key="heart" @click="onLikeChange">
              <span v-if="like">
                <IconHeartFill :style="{ color: '#f53f3f' }" />
              </span>
              <span v-else>
                <IconHeart />
              </span>
              {{ 83 + (like ? 1 : 0) }}
            </span>
            <span class="action" key="star" @click="onStarChange">
              <span v-if="star">
                <IconStarFill />
              </span>
              <span v-else>
                <IconStar />
              </span>
              {{ 3 + (star ? 1 : 0) }}
            </span>
            <span class="action" key="reply" @click="handleReply(item.id)">
              <IconMessage />
              回复
            </span>
          </template>
        </comment>
      </template>
    </div>

    <modal title="评论" :visible="modalVisible" :setVisible="setModalVisible">
      <template #default>
        <div class="sub-wrapper">
          <div class="sub-body">
            <template
              v-for="subItem in subCommentList"
              :key="'sub-' + subItem.id"
            >
              <comment :data="subItem"></comment>
            </template>
          </div>
          <div class="sub-footer">
            <a-input v-model="subCommentStr"></a-input>
            <a-button type="primary" @click="handleSubPublish()">
              发送
            </a-button>
          </div>
        </div>
      </template>
    </modal>
  </div>
</template>

<script setup lang="ts">
import comment from "@/components/common/comment/index.vue";
import modal from "@/components/common/modal/index.vue";
import { commonRequest } from "@/utils/request";
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { onMounted } from "vue";
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
} from "@arco-design/web-vue/es/icon";

const modalVisible = ref(false);
const commentStr = ref("");
const like = ref(false);
const star = ref(false);
const subCommentStr = ref("");
const userInfo = ref(null);
const commentList = ref([]);
const subCommentList = ref([]);
const subCommentId = ref("");

const setModalVisible = (visible: boolean) => {
  modalVisible.value = visible;
};

const onLikeChange = () => {
  like.value = !like.value;
};
const onStarChange = () => {
  star.value = !star.value;
};

const getComments = async () => {
  const res = await commonRequest.get("/comments/select");
  commentList.value = res.data.date;
};

const getSubComments = async (id: string) => {
  const res = await commonRequest.post("/comments/selectById", `${id}`);
  console.log("sub", res);
  subCommentList.value = res.data?.date ?? [];
};

const handlePublish = async () => {
  const data = {
    content: commentStr.value,
    userid: userInfo.value?.id,
  };

  const res = await commonRequest.post("/comments/add", data);

  if (res.data.code === 200) {
    Message.success("评论成功");
    commentStr.value = "";
    getComments();
  }
};

const handleSubPublish = async () => {
  const data = {
    content: subCommentStr.value,
    userid: userInfo.value?.id,
    parentcommentid: subCommentId.value,
  };

  const res = await commonRequest.post("/comments/add", data);

  if (res.data.code === 200) {
    Message.success("评论成功");
    subCommentStr.value = "";
    getSubComments(subCommentId.value);
  }
};

const handleReply = async (id: string) => {
  subCommentId.value = id;
  getSubComments(id);
  setModalVisible(true);
};

onMounted(() => {
  const userInfoJSON = localStorage.getItem("userInfo");
  userInfo.value = JSON.parse(userInfoJSON);
  getComments();
});
</script>

<style scoped>
.wrapper {
  height: calc(100vh - 80px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.header {
  display: flex;
  gap: 24px;
  padding: 24px;
}
.body {
  margin: 8px 24px;
  overflow-y: auto;
}

.sub-wrapper {
  min-height: 300px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.sub-footer {
  display: flex;
  gap: 8px;
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.action:hover {
  background: var(--color-fill-3);
}
</style>
